<template>
    <div id='wrap'>
        <h1>axios请求数据实现tab切换</h1>
        <div id="btn-wrap">
            <div v-for="(item, index) in navs" :key="index" @click="_index = index"
                :class="['btn', { active: _index == index }]">
                <span>{{ item }}</span>
            </div>
        </div>
        <div id="con-wrap">
            <div class="con" v-if="_index == 0">
                <div class="list-cird" v-for="(item, index) in list1" :key="index">
                    <img :src="item.img" alt="">
                    <span class="list-cird-title">{{ item.title }}</span>
                    <span class="list-crid-content">{{ item.content }}</span>
                </div>
            </div>
            <div class="con" v-else-if="_index == 1">
                <div class="list-cird" v-for="(item, index) in list2" :key="index">
                    <img :src="item.img" alt="">
                    <span class="list-cird-title">{{ item.title }}</span>
                    <span class="list-crid-content">{{ item.content }}</span>
                </div>
            </div>
            <div class="con" v-else-if="_index == 2">                    
                <div class="list-cird" v-for="(item, index) in list3" :key="index">
                    <img :src="item.img" alt="">
                    <span class="list-cird-title">{{ item.title }}</span>
                    <span class="list-crid-content">{{ item.content }}</span>
                </div>
            </div>
        </div>
    </div>


</template>
<script lang='ts'>
export default {
    name: 'studemo12',
}
</script>
<script lang='ts' setup>
import { ref } from 'vue';
import axios from 'axios';

interface lisItem {
    img: string;
    title: string;
    content: string;
}
const _index = ref(0);
const navs = ref<string[]>(['原神', '鸣潮', '崩坏3']);

const list1 = ref<lisItem[]>([]);
const data1 = async () => {
    const response = await axios.get("https://mock.mengxuegu.com/mock/645b57ae7ba95d67784d6738/img/tabone")
    return response.data
}
data1().then((data) => {
    console.log(data);
    list1.value = data
})

const list2 = ref<lisItem[]>([]);
const data2 = async () => {
    const response = await axios.get("https://mock.mengxuegu.com/mock/645b57ae7ba95d67784d6738/img/tabthree")
    return response.data
}
data2().then((data) => {
    list2.value = data
})

const list3 = ref<lisItem[]>([]);
const data3 = async () => {
    const response = await axios.get("https://mock.mengxuegu.com/mock/645b57ae7ba95d67784d6738/img/tabtwo")
    return response.data
}
data3().then((data) => {
    list3.value = data
})
</script>
<style lang='scss'>
/* 资讯部分导航 */
#btn-wrap {
    margin-top: 2vh;
    width: 90%;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-bottom: 5px;
}

.btn {
    width: calc(100% / 3 - 2vh);
    margin: 0 1vh;
    height: 80px;
    font-size: 20px;
    text-align: center;
    font-weight: bold;
    line-height: 80px;
    border-radius: 0.75rem;
    color: #fff;
    background-color: #4cceff;
}

.active {
    color: #4cceff;
    background-color: rgba(255, 255, 255, 0.7);
}

/* 切换内容部分 */
#con-wrap {
    width: 90%;
    height: 100%;
    margin: 0 auto;
    border-radius: 10px;
    background-color: rgba(241, 242, 243, 0.9);
}

.con {
    width: 100%;
    // height: 100%;
    height: auto;
    min-height: 60vh;
    overflow-y: auto;
    display: flex;
    align-items: center;
    justify-content: start;
    flex-wrap: wrap;
}

.con::-webkit-scrollbar {
    width: 1px;
}

.list-cird {
    width: calc((100% / 2) - 30px);
    height: 100%;
    margin: 10px auto;
    background-color: rgba(76, 206, 255, 0.9);
    box-shadow: 5px 5px 5px rgba(85, 0, 255, 0.5);
    border-radius: 4px;
    box-shadow: 1px 1px 5px #eee;
}

.list-crid>img {
    width: calc(100% - 20px);
    height: 300px;
    display: block;
    margin: 10px auto;
}

.list-crid-title {
    font-size: 18px;
    width: calc(100% - 20px);
    display: block;
    line-height: 18px;
    padding: 10px 0;
    margin: 0 auto;
    font-weight: bold;
}

.list-crid-content {
    width: calc(100% - 20px);
    margin: 10px auto;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
}
</style>